<template>
  <div class="label-history">
    <el-table
      v-loading="tableLoading"
      :data="list"
      border
      stripe
      style="width: 100%"
      size="small"
      element-loading-text="加载中"
      empty-text="暂无数据"
    >
      <el-table-column prop="createTime" label="时间" />
      <el-table-column prop="source" label="来源" />
      <el-table-column prop="operation" label="操作类型">
        <template slot-scope="scope">
          <span :style="{ color: scope.row.operation==='添加标签'?'#039D12':'#D9001B'}">
            {{ scope.row.operation }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="说明">
        <template slot-scope="scope">
          <span>{{ scope.row.remark?scope.row.remark:"/" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="userAccount" label="操作人">
        <template slot-scope="scope">
          <span style="color: #039D12">{{ scope.row.userAccount?scope.row.userAccount:"/" }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination-direction
      v-if="paginationConfig.total!==0"
      :config="paginationConfig"
      @sizeschange="sizesChange"
      @pagechange="pageChange"
    />
  </div>
</template>

<script>
import { getTagsHistory } from '@/api/vip'

export default {
  props: {
    vipDetail: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      // 配置
      paginationConfig: {
        // 分页配置
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      // 状态
      tableLoading: false,
      // 数据
      list: [] // 表格数据
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getTagsHistory({ memberId: this.vipDetail.member.id, page: this.paginationConfig.page }).then((res) => {
        res.data.list.forEach(e => {
          e.operation = e.operation === 1 ? '添加标签' : '移除标签'
          e.source = e.source === 1 ? '人工标记' : '自动标记'
        })
        this.list = res.data.list
        this.paginationConfig.total = res.data.total
        this.paginationConfig.page = res.data.pageNum
      })
    },
    // 分页sizes改变
    sizesChange() {
      this.fetchData()
    },

    // 分页page改变
    pageChange() {
      this.fetchData()
    }
  }
}
</script>

<style scoped>
.label-history{
  background-color: #fff;
  padding: 30px;
}
</style>
